import { useState, useEffect } from 'react';
import { useParams, Link } from 'react-router-dom';
import { Star, ChevronRight, Heart } from 'lucide-react';
import { ProductCard } from '../../components/ProductCard';
import { setPageTitle } from '../../lib/utils';

export function SkincareDetail() {
  const {
    productId
  } = useParams();
  const [activeTab, setActiveTab] = useState('description');
  const [activeImage, setActiveImage] = useState(0);
  // Mock skincare products data - normally this would come from an API
  const products = [{
    id: 'sk-001',
    title: 'Hydrating Rose Facial Toner',
    brand: 'Pure Bloom',
    image: 'https://images.unsplash.com/photo-1608248597279-f99d160bfcbc?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    images: ['https://images.unsplash.com/photo-1608248597279-f99d160bfcbc?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1608248543803-ba4f8c70ae0b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1608248543803-ba4f8c70ae0b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'],
    rating: 4.8,
    reviewCount: 124,
    price: 28.0,
    category: 'Skincare',
    type: 'toner',
    concern: ['hydration', 'balance'],
    skinType: ['normal', 'dry'],
    description: "This refreshing and hydrating toner is infused with rose water and hyaluronic acid to balance your skin's pH levels while providing essential moisture. Perfect for use after cleansing, it prepares your skin to better absorb serums and moisturizers that follow.",
    ingredients: 'Rose Water, Glycerin, Hyaluronic Acid, Aloe Vera Leaf Juice, Chamomile Extract, Panthenol, Allantoin, Niacinamide, Natural Fragrance, Phenoxyethanol (and) Ethylhexylglycerin',
    howToUse: 'After cleansing, apply to a cotton pad and gently sweep across face and neck. Or spray directly onto face and press into skin with palms. Follow with serum and moisturizer. Use morning and evening.'
  }, {
    id: 'sk-002',
    title: 'Vitamin C Brightening Serum',
    brand: 'Glow Theory',
    image: 'https://images.unsplash.com/photo-1576426863848-c21f53c60b19?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    images: ['https://images.unsplash.com/photo-1576426863848-c21f53c60b19?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1567721913486-6585f069b332?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'],
    rating: 4.7,
    reviewCount: 89,
    price: 52.0,
    category: 'Skincare',
    type: 'serum',
    concern: ['brightening', 'anti-aging'],
    skinType: ['all'],
    description: 'This powerful vitamin C serum helps brighten skin tone, reduce the appearance of dark spots, and protect against environmental stressors. Formulated with a stable form of vitamin C and antioxidant-rich ingredients, it promotes a more radiant, even complexion.',
    ingredients: 'Vitamin C, Vitamin E, Ferulic Acid, Hyaluronic Acid, Sea Buckthorn Oil, Licorice Root Extract, Aloe Vera, Jojoba Oil, Tocopherol, Phenoxyethanol',
    howToUse: 'Apply 3-4 drops to clean, dry skin in the morning. Gently pat into face, neck, and décolletage. Allow to absorb before applying moisturizer and sunscreen. For sensitive skin, start with every other day and gradually increase frequency.'
  }, {
    id: 'sk-004',
    title: 'Green Tea Cleansing Oil',
    brand: 'Ritual Beauty',
    image: 'https://images.unsplash.com/photo-1595348020949-87cdfbb44174?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    images: ['https://images.unsplash.com/photo-1595348020949-87cdfbb44174?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1608248597279-f99d160bfcbc?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1567721913486-6585f069b332?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'],
    rating: 4.6,
    reviewCount: 53,
    price: 34.0,
    category: 'Skincare',
    type: 'cleanser',
    concern: ['cleansing', 'balance'],
    skinType: ['combination', 'oily'],
    description: 'This luxurious cleansing oil effortlessly removes makeup, sunscreen, and daily impurities while nourishing the skin. Infused with antioxidant-rich green tea extract, it provides a deep cleanse without stripping the skin of its natural moisture.',
    ingredients: 'Green Tea Extract, Jojoba Oil, Sunflower Seed Oil, Grapeseed Oil, Vitamin E, Rosemary Extract, Chamomile Extract, Sweet Orange Essential Oil, Phenoxyethanol',
    howToUse: 'Apply 2-3 pumps to dry hands and gently massage onto dry face and neck. Add a small amount of water to emulsify, then rinse thoroughly with warm water. Follow with your regular cleanser if double cleansing.'
  }, {
    id: 'sk-006',
    title: 'Nourishing Face Oil',
    brand: 'Ritual Beauty',
    image: 'https://images.unsplash.com/photo-1598662972299-5408ddb8a3dc?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    images: ['https://images.unsplash.com/photo-1598662972299-5408ddb8a3dc?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1625772452859-1c03d5bf1137?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'],
    rating: 4.8,
    reviewCount: 67,
    price: 56.0,
    category: 'Skincare',
    type: 'oil',
    concern: ['nourishing', 'repair'],
    skinType: ['dry', 'normal'],
    description: 'This deeply nourishing face oil is a blend of precious botanical oils that restore and rejuvenate skin overnight. Rich in essential fatty acids and antioxidants, it helps repair damage while providing intense hydration for a radiant, youthful complexion.',
    ingredients: 'Argan Oil, Rosehip Seed Oil, Jojoba Oil, Sea Buckthorn Oil, Vitamin E, Frankincense Essential Oil, Lavender Essential Oil, Geranium Essential Oil, Phenoxyethanol',
    howToUse: 'Apply 3-4 drops to clean skin in the evening. Gently press into face and neck, allowing full absorption. Can be mixed with moisturizer for lighter application or used alone for intensive nourishment.'
  }, {
    id: 'sk-005',
    title: 'Hyaluronic Acid Moisture Boost',
    brand: 'Glow Theory',
    image: 'https://images.unsplash.com/photo-1567721913486-6585f069b332?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    images: ['https://images.unsplash.com/photo-1567721913486-6585f069b332?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1576426863848-c21f53c60b19?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1598662972299-5408ddb8a3dc?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'],
    rating: 4.7,
    reviewCount: 112,
    price: 48.0,
    category: 'Skincare',
    type: 'serum',
    concern: ['hydration', 'plumping'],
    skinType: ['all'],
    description: 'This intensely hydrating serum features multiple molecular weights of hyaluronic acid to plump and hydrate skin at different levels. It helps retain moisture, smooth fine lines, and gives skin a bouncy, youthful appearance.',
    ingredients: 'Hyaluronic Acid (High & Low Molecular Weight), Sodium Hyaluronate, Vitamin B5, Glycerin, Aloe Vera Extract, Green Tea Extract, Squalane, Allantoin, Phenoxyethanol',
    howToUse: 'Apply 2-3 drops to damp skin morning and evening. Gently press into face and neck, allowing full absorption before applying moisturizer. Can be layered under oils or heavier serums.'
  }, {
    id: 'sk-007',
    title: 'Gentle Exfoliating Scrub',
    brand: 'Pure Bloom',
    image: 'https://images.unsplash.com/photo-1556228578-0d85b1a4d571?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    images: ['https://images.unsplash.com/photo-1556228578-0d85b1a4d571?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1608248597279-f99d160bfcbc?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'],
    rating: 4.5,
    reviewCount: 42,
    price: 32.0,
    category: 'Skincare',
    type: 'exfoliator',
    concern: ['exfoliation', 'brightening'],
    skinType: ['all'],
    description: 'This gentle yet effective exfoliating scrub removes dead skin cells and impurities while nourishing the skin. Formulated with natural jojoba beads and fruit enzymes, it reveals smoother, brighter skin without irritation.',
    ingredients: 'Jojoba Beads, Papaya Extract, Pineapple Enzyme, Glycolic Acid, Shea Butter, Coconut Oil, Vitamin E, Chamomile Extract, Lavender Essential Oil, Phenoxyethanol',
    howToUse: 'Use 2-3 times per week on clean, damp skin. Gently massage in circular motions for 30-60 seconds, avoiding the eye area. Rinse thoroughly with warm water. Follow with toner and moisturizer.'
  }, {
    id: 'sk-008',
    title: 'Calming Aloe Gel Moisturizer',
    brand: 'Ritual Beauty',
    image: 'https://images.unsplash.com/photo-1601049541289-9b1b7bbbfe19?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    images: ['https://images.unsplash.com/photo-1601049541289-9b1b7bbbfe19?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1598662972299-5408ddb8a3dc?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1567721913486-6585f069b332?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'],
    rating: 4.4,
    reviewCount: 38,
    price: 42.0,
    category: 'Skincare',
    type: 'moisturizer',
    concern: ['calming', 'hydration'],
    skinType: ['sensitive', 'normal'],
    description: 'This lightweight, cooling gel moisturizer is perfect for sensitive or irritated skin. Enriched with pure aloe vera and calming botanicals, it provides instant relief while delivering essential hydration without heaviness.',
    ingredients: 'Aloe Vera Gel, Cucumber Extract, Calendula Extract, Allantoin, Hyaluronic Acid, Panthenol, Green Tea Extract, Bisabolol, Glycerin, Phenoxyethanol',
    howToUse: 'Apply to clean skin morning and evening. Gently massage until fully absorbed. Perfect for use after sun exposure, shaving, or any time skin needs soothing relief.'
  }, {
    id: 'sk-009',
    title: 'Retinol Night Repair Cream',
    brand: 'Glow Theory',
    image: 'https://images.unsplash.com/photo-1625772452859-1c03d5bf1137?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    images: ['https://images.unsplash.com/photo-1625772452859-1c03d5bf1137?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1598662972299-5408ddb8a3dc?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'],
    rating: 4.9,
    reviewCount: 95,
    price: 68.0,
    originalPrice: 78.0,
    category: 'Skincare',
    type: 'moisturizer',
    concern: ['anti-aging', 'repair'],
    skinType: ['normal', 'dry'],
    description: 'This advanced night cream combines gentle retinol with nourishing peptides and ceramides to reduce signs of aging while you sleep. It helps improve skin texture, reduce fine lines, and promotes cellular renewal for a youthful complexion.',
    ingredients: 'Retinol, Peptides, Ceramides, Squalane, Niacinamide, Vitamin E, Shea Butter, Jojoba Oil, Hyaluronic Acid, Bakuchiol, Phenoxyethanol',
    howToUse: 'Apply to clean skin in the evening only. Start with 2-3 times per week and gradually increase frequency. Always use sunscreen during the day when using retinol products. Avoid eye area.'
  }, {
    id: 'sk-010',
    title: 'Purifying Clay Mask',
    brand: 'Pure Bloom',
    image: 'https://images.unsplash.com/photo-1608248543803-ba4f8c70ae0b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    images: ['https://images.unsplash.com/photo-1608248543803-ba4f8c70ae0b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1556228578-0d85b1a4d571?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1595348020949-87cdfbb44174?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'],
    rating: 4.6,
    reviewCount: 57,
    price: 36.0,
    category: 'Skincare',
    type: 'mask',
    concern: ['purifying', 'detox'],
    skinType: ['combination', 'oily'],
    description: 'This deep-cleansing clay mask draws out impurities and excess oil while delivering mineral-rich nutrients to the skin. Formulated with bentonite and kaolin clays, it leaves skin feeling clean, balanced, and refreshed.',
    ingredients: 'Bentonite Clay, Kaolin Clay, Charcoal Powder, Tea Tree Oil, Salicylic Acid, Witch Hazel, Aloe Vera, Green Tea Extract, Rosemary Extract, Phenoxyethanol',
    howToUse: 'Apply a thin, even layer to clean, dry skin, avoiding the eye area. Leave on for 10-15 minutes until dry. Rinse with warm water and pat dry. Use 1-2 times per week.'
  }, {
    id: 'sk-011',
    title: 'Brightening Eye Cream',
    brand: 'Glow Theory',
    image: 'https://images.unsplash.com/photo-1614859073991-1e5c2093b4f7?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    images: ['https://images.unsplash.com/photo-1614859073991-1e5c2093b4f7?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1567721913486-6585f069b332?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1576426863848-c21f53c60b19?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'],
    rating: 4.7,
    reviewCount: 48,
    price: 46.0,
    category: 'Skincare',
    type: 'eye care',
    concern: ['brightening', 'anti-aging'],
    skinType: ['all'],
    description: 'This luxurious eye cream targets dark circles, puffiness, and fine lines around the delicate eye area. Infused with caffeine, vitamin C, and peptides, it brightens and firms for a more youthful, awakened appearance.',
    ingredients: 'Caffeine, Vitamin C, Peptides, Hyaluronic Acid, Arnica Extract, Cucumber Extract, Retinyl Palmitate, Shea Butter, Glycerin, Phenoxyethanol',
    howToUse: 'Gently pat a small amount around the eye area morning and evening using your ring finger. Avoid direct contact with eyes. Can be used under makeup.'
  }, {
    id: 'sk-012',
    title: 'Soothing Rosewater Mist',
    brand: 'Ritual Beauty',
    image: 'https://images.unsplash.com/photo-1608248543803-ba4f8c70ae0b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    images: ['https://images.unsplash.com/photo-1608248543803-ba4f8c70ae0b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1608248597279-f99d160bfcbc?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1567721913486-6585f069b332?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'],
    rating: 4.5,
    reviewCount: 63,
    price: 24.0,
    category: 'Skincare',
    type: 'mist',
    concern: ['soothing', 'hydration'],
    skinType: ['all', 'sensitive'],
    description: 'This refreshing facial mist provides instant hydration and comfort throughout the day. Made with pure rose water and calming botanicals, it sets makeup, refreshes skin, and provides a moment of aromatherapy bliss.',
    ingredients: 'Rose Water, Glycerin, Aloe Vera Extract, Chamomile Extract, Lavender Extract, Hyaluronic Acid, Allantoin, Natural Rose Essential Oil, Phenoxyethanol',
    howToUse: 'Spray 6-8 inches from face with eyes closed. Use throughout the day to refresh and hydrate skin, over or under makeup. Can also be used to dampen skin before applying serums for better absorption.'
  }, {
    id: 'sk-003',
    title: 'Overnight Hydration Mask',
    brand: 'Pure Bloom',
    images: [
      'https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
      'https://images.unsplash.com/photo-1556228724-d8fdf4c76d7a?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
      'https://images.unsplash.com/photo-1567046853761-b4e1e5b8b5d4?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'
    ],
    rating: 4.9,
    reviewCount: 76,
    price: 38.0,
    originalPrice: 48.0,
    category: 'Skincare',
    type: 'mask',
    concern: ['hydration', 'anti-aging'],
    skinType: ['dry', 'mature'],
    description: 'Transform your skin overnight with this intensive hydration mask. Formulated with hyaluronic acid, ceramides, and peptides, it works while you sleep to restore moisture, plump fine lines, and reveal a radiant complexion by morning.',
    ingredients: 'Hyaluronic Acid, Ceramide NP, Peptides, Shea Butter, Squalane, Niacinamide, Vitamin E, Allantoin, Glycerin, Aqua',
    howToUse: 'Apply a generous layer to clean, dry skin before bed. Leave on overnight and rinse with warm water in the morning. Use 2-3 times per week or as needed for extra hydration.'
  }];
  // Reviews data
  const reviews = [{
    id: 1,
    author: 'Emma T.',
    rating: 5,
    date: '2023-05-15',
    title: 'Game changer for my dry skin',
    content: "I've been using this product for a month now, and I've noticed such a difference in my skin's hydration levels. My makeup applies so much more smoothly now, too.",
    this: '',
    for: ''
  }, {
    id: 2,
    author: 'Sarah M.',
    rating: 4,
    date: '2023-04-22',
    title: 'Great product, lovely scent',
    content: 'This toner feels so refreshing and has a beautiful, natural rose scent. I took off one star because the bottle is a bit difficult to use sometimes, but the product itself is wonderful.',
    helpfulCount: 18
  }, {
    id: 3,
    author: 'Jennifer K.',
    rating: 5,
    date: '2023-03-10',
    title: 'Holy grail toner',
    content: "I've tried so many toners, and this is by far the best. It doesn't strip my skin or leave it feeling tight. Instead, it feels plump and hydrated. Will definitely repurchase!",
    this: '',
    for: ''
  }];
  // Related products
  const relatedProducts = [{
    id: 'sk-003',
    title: 'Overnight Hydration Mask',
    brand: 'Pure Bloom',
    image: 'https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    rating: 4.9,
    reviewCount: 76,
    price: 38.0,
    originalPrice: 48.0,
    category: 'Skincare'
  }, {
    id: 'sk-004',
    title: 'Green Tea Cleansing Oil',
    brand: 'Ritual Beauty',
    image: 'https://images.unsplash.com/photo-1595348020949-87cdfbb44174?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    rating: 4.6,
    reviewCount: 53,
    price: 34.0,
    category: 'Skincare'
  }, {
    id: 'sk-006',
    title: 'Nourishing Face Oil',
    brand: 'Ritual Beauty',
    image: 'https://images.unsplash.com/photo-1598662972299-5408ddb8a3dc?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    rating: 4.8,
    reviewCount: 67,
    price: 56.0,
    category: 'Skincare'
  }];
  // Find the current product
  const product = products.find(p => p.id === productId);

  useEffect(() => {
    if (product) {
      setPageTitle(product.title);
    }
  }, [product]);

  if (!product) {
    return <div className="max-w-7xl mx-auto px-4 md:px-8 lg:px-12 py-12 text-center">
        <h1 className="font-serif text-2xl mb-4">Product Not Found</h1>
        <p className="mb-6">
          The product you're looking for doesn't exist or has been removed.
        </p>
        <Link to="/skincare" className="bg-[#4a6b60] hover:bg-[#3d5a50] text-white px-6 py-3 rounded-md transition-colors">
          Back to Skincare
        </Link>
      </div>;
  }

  return <div className="max-w-7xl mx-auto px-4 md:px-8 lg:px-12 py-12">
      {/* Breadcrumbs */}
      <div className="flex items-center text-sm mb-8">
        <Link to="/" className="text-gray-500 hover:text-[#4a6b60]">
          Home
        </Link>
        <ChevronRight size={14} className="mx-2 text-gray-400" />
        <Link to="/skincare" className="text-gray-500 hover:text-[#4a6b60]">
          Skincare
        </Link>
        <ChevronRight size={14} className="mx-2 text-gray-400" />
        <span className="text-[#4a4a4a]">{product.title}</span>
      </div>
      {/* Product Details */}
      <div className="flex flex-col lg:flex-row gap-12 mb-16">
        {/* Product Images */}
        <div className="lg:w-1/2">
          <div className="bg-white rounded-lg overflow-hidden mb-4">
            <img src={product.images[activeImage]} alt={product.title} className="w-full h-[500px] object-cover" />
          </div>
          <div className="flex gap-4">
            {product.images.map((image, index) => <button key={index} onClick={() => setActiveImage(index)} className={`w-20 h-20 rounded-md overflow-hidden border-2 ${index === activeImage ? 'border-[#4a6b60]' : 'border-transparent'}`}>
                <img src={image} alt={`${product.title} view ${index + 1}`} className="w-full h-full object-cover" />
              </button>)}
          </div>
        </div>
        {/* Product Info */}
        <div className="lg:w-1/2">
          <div className="text-xs uppercase tracking-wider text-[#4a6b60] font-medium mb-1">
            {product.brand}
          </div>
          <h1 className="font-serif text-3xl mb-4">{product.title}</h1>
          <div className="flex items-center mb-4">
            <div className="flex items-center">
              {[...Array(5)].map((_, i) => <Star key={i} size={16} className={`${i < Math.round(product.rating) ? 'fill-[#d7a27c] text-[#d7a27c]' : 'text-gray-300'}`} />)}
            </div>
            <span className="text-sm ml-2">
              {product.rating} ({product.reviewCount} reviews)
            </span>
          </div>
          <div className="text-xl font-medium mb-6">
            ${product.price.toFixed(2)}
          </div>
          <div className="mb-6">
            <h3 className="font-medium text-sm uppercase tracking-wider mb-2">
              Description
            </h3>
            <p className="text-sm leading-relaxed">{product.description}</p>
          </div>
          <div className="mb-6">
            <h3 className="font-medium text-sm uppercase tracking-wider mb-2">
              Skin Type
            </h3>
            <div className="flex flex-wrap gap-2">
              {product.skinType.map(type => <span key={type} className="px-3 py-1 bg-[#f3f0eb] rounded-full text-sm">
                  {type.charAt(0).toUpperCase() + type.slice(1)}
                </span>)}
            </div>
          </div>
          <div className="mb-6">
            <h3 className="font-medium text-sm uppercase tracking-wider mb-2">
              Concerns
            </h3>
            <div className="flex flex-wrap gap-2">
              {product.concern.map(concern => <span key={concern} className="px-3 py-1 bg-[#f3f0eb] rounded-full text-sm">
                  {concern.charAt(0).toUpperCase() + concern.slice(1)}
                </span>)}
            </div>
          </div>
          <div className="mb-8">
            <button className="p-3 border border-[#e8e5e0] rounded-md hover:bg-[#f3f0eb] transition-colors" aria-label="Add to wishlist">
              <Heart size={18} />
            </button>
          </div>
        </div>
      </div>
      {/* Product Tabs */}
      <div className="mb-16">
        <div className="border-b border-[#e8e5e0] mb-8">
          <div className="flex">
            <button onClick={() => setActiveTab('description')} className={`px-6 py-3 text-sm font-medium ${activeTab === 'description' ? 'border-b-2 border-[#4a6b60] text-[#4a6b60]' : 'text-gray-500'}`}>
              Details
            </button>
            <button onClick={() => setActiveTab('ingredients')} className={`px-6 py-3 text-sm font-medium ${activeTab === 'ingredients' ? 'border-b-2 border-[#4a6b60] text-[#4a6b60]' : 'text-gray-500'}`}>
              Ingredients
            </button>
            <button onClick={() => setActiveTab('how-to-use')} className={`px-6 py-3 text-sm font-medium ${activeTab === 'how-to-use' ? 'border-b-2 border-[#4a6b60] text-[#4a6b60]' : 'text-gray-500'}`}>
              How to Use
            </button>
            <button onClick={() => setActiveTab('reviews')} className={`px-6 py-3 text-sm font-medium ${activeTab === 'reviews' ? 'border-b-2 border-[#4a6b60] text-[#4a6b60]' : 'text-gray-500'}`}>
              Reviews ({product.reviewCount})
            </button>
          </div>
        </div>
        <div className="bg-white p-8 rounded-lg">
          {activeTab === 'description' && <div>
              <p className="leading-relaxed mb-4">{product.description}</p>
              <p className="leading-relaxed">
                Our products are formulated without parabens, sulfates,
                phthalates, or synthetic fragrances. We believe in clean beauty
                that works.
              </p>
            </div>}
          {activeTab === 'ingredients' && <div>
              <p className="leading-relaxed mb-4">Full Ingredients List:</p>
              <p className="leading-relaxed">{product.ingredients}</p>
            </div>}
          {activeTab === 'how-to-use' && <div>
              <p className="leading-relaxed">{product.howToUse}</p>
            </div>}
          {activeTab === 'reviews' && <div>
              <div className="flex items-center justify-between mb-8">
                <div>
                  <div className="flex items-center">
                    {[...Array(5)].map((_, i) => <Star key={i} size={20} className={`${i < Math.round(product.rating) ? 'fill-[#d7a27c] text-[#d7a27c]' : 'text-gray-300'}`} />)}
                    <span className="text-lg ml-2 font-medium">
                      {product.rating} out of 5
                    </span>
                  </div>
                  <p className="text-sm text-gray-500 mt-1">
                    Based on {product.reviewCount} reviews
                  </p>
                </div>
                <button className="bg-[#4a6b60] hover:bg-[#3d5a50] text-white px-6 py-3 rounded-md transition-colors">
                  Write a Review
                </button>
              </div>
              <div className="space-y-8">
                {reviews.map(review => <div key={review.id} className="border-b border-[#e8e5e0] pb-8">
                    <div className="flex justify-between mb-2">
                      <h3 className="font-medium">{review.author}</h3>
                      <span className="text-sm text-gray-500">
                        {review.date}
                      </span>
                    </div>
                    <div className="flex items-center mb-2">
                      {[...Array(5)].map((_, i) => <Star key={i} size={14} className={`${i < review.rating ? 'fill-[#d7a27c] text-[#d7a27c]' : 'text-gray-300'}`} />)}
                    </div>
                    <h4 className="font-medium mb-2">{review.title}</h4>
                    <p className="text-sm leading-relaxed mb-4">
                      {review.content}
                    </p>
                    <button className="text-sm text-[#4a6b60] hover:underline">
                      Helpful ({review.helpfulCount})
                    </button>
                  </div>)}
              </div>
            </div>}
        </div>
      </div>
      {/* Related Products */}
      <div>
        <h2 className="font-serif text-2xl mb-8">You May Also Like</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {relatedProducts.map(relatedProduct => <ProductCard key={relatedProduct.id} id={relatedProduct.id} title={relatedProduct.title} brand={relatedProduct.brand} image={relatedProduct.image} rating={relatedProduct.rating} reviewCount={relatedProduct.reviewCount} price={relatedProduct.price} originalPrice={relatedProduct.originalPrice} category={relatedProduct.category} />)}
        </div>
      </div>
    </div>;
}